<template>
    <div class="view-body">
        <navbar :title="nodeTitle"></navbar>
        <!--我的课程-->
        <div class="content-noBottom">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                <div v-bind:class="{'height100' : coursesList.length === 0}">
                    <div class="courseList-word-title-01" :style="{'background-color' : (coursesList.length > 0 ? 'white': '')}">
                        {{$t('position_learning_curriculum_schedule')}}({{ coursesList.length }})
                    </div>
                    <div v-for="item in coursesList" :key="item.itmId" class="view-body-list">
                        <div class="viewBody-listContent" @click="detailJump(item)">
                            <!-- 课程图片 -->
                            <div class="listContent-img" v-if="item.itmIcon">
                                <img v-bind:src="appUrl + item.itmIcon" alt=""/>
                                <div class="listContent-img-status" v-if="item.isCanread === 1 && item.appStatus">{{ typeTitle[item.appStatus] }}</div>
                                <div class="listContent-img-status" v-if="item.isCanread === 0">
                                    <img src="./images/notcanread.png" style="width: 20%;height: 30%;">
                                </div>
                            </div>
                            <!-- 课程描述 -->
                            <div class="listContent-content" style="position:relative;">
                                <div class="listContent-title">
                                    <i :class="{'public-mobile-icon' : (item.itmMobileInd === 'yes'), 'public-mobile-icon-blank' : item.itmMobileInd === 'no'}"></i>{{ item.itmTitle }}
                                </div>
                                <div class="listContent-scheduleContent-buttom clearfix" style="width:70%;position:absolute; bottom:0;">
                                    <div>{{ item.itmExamInd ? examType[item.itmType] : courseType[item.itmType] }}</div>
                                    <div style="float: right;">
                                        <span class="people-num-icon"></span>{{item.appCount}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--暂无数据-->
                <div v-if="!isLoading && page.totalRecord === 0 && !page.init" style="height:100%;">
                    <div class="box-table" style="width:100%;height:calc(100vh - 84px);">
                        <div class="box-table-cell" style="text-align: center;">
                            <div class="no-data">
                                <img src="../../../static/images/no-data.png" alt=""/>
                                <p class="color999">{{ $t("no_data") }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <common-loading :isLoading="isLoading"></common-loading>
            </van-pull-refresh>
            <div class="toast-box-03" v-if="tipsPower.show">
                <p class="toast-box-03-title">{{ tipsPower.msg }}</p>
            </div>
            <van-dialog
            v-model="tips.show"
            :title="tips.msg"
            :confirmButtonText="$t('sure')"
            >
            </van-dialog>
        </div>
    </div>
</template>

<script>
import mixin from '@/components/mixin/Mixin';
export default {
    name: 'MmyCourses',
    mixins: [mixin],
    data() {
        return {
            coursesList: [],
            page: {
                pageNo: 1, //分页页码
                pageSize: 10,
                totalPage: 1, //总页数
                totalRecord: 0, //总数
                downloading: false,
                init: true //首次不出现，“无数据”和“没有更多”提示
            },
            typeTitle: {
                I: this.$t('cos_app_inprogress'), //进行中
                C: this.$t('cos_app_completed'), //已完成
                notIAndC: this.$t('cos_other'), //其他
                F: this.$t('cos_app_fail'), //未完成
                Pending: this.$t('cos_app_pending'), //审批中
                Waiting: this.$t('cos_in_wait_list'), //等待队列
                W: this.$t('cos_app_withdrawn'), //已放弃
                Rejected: this.$t('cos_app_rejected') //已拒绝
            },
            nodeTitle: '',
            tips: {
                show: false,
                msg: ''
            },
            tipsPower: {
                show: false,
                msg: ''
            },
            isLoading: true,
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        init() {
            let pfsId = this.$route.params.pfsId;
            let psiUgrId = this.$route.params.psiUgrId;
            //获取地图职级下的课程
            this.$axios({
                method: 'GET',
                url: '/app/api/trainee/grade-map/courseList',
                params: {
                    ugrEntId: psiUgrId,
                    pfsId: pfsId,
                    pageNo: this.page.pageNo,
                    pageSize: this.page.pageSize
                }
            }).then(res => {
                if (res.data) {
                    this.coursesList = res.data;
                    this.page.totalRecord = res.data.length || 0;
                    this.page.downloading = false;
                    this.page.init = false;
                    this.isLoading = false;
                }
            });
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.page.pageNo = 1;
                this.init();
                this.isRefresh = false;
            }, 900);
        },
        detailJump(itemObj) {
            //如果没有发布在移动端
            if (itemObj.itmMobileInd === 'no') {
                this.tips.show = true;
                this.tips.msg = this.$t('lab_no_publish_mobile');
                return;
            }
            //没有权限
            if (itemObj.isCanread === false) {
                this.tipsPower.show = true;
                this.tipsPower.msg = this.$t('no_permission');
                setTimeout(() => {
                    this.tipsPower.show = false;
                }, 3000);
                return;
            }
            let itmId = this.wbEncryptor(itemObj.itmId);
            let tkhId = 0;
            if (itemObj.tkhId) {
                tkhId = itemObj.tkhId;
            };
            if (itemObj.itmType === 'MAP') {
                this.$router.push({path: '/studyMapDetail', query: {itmId: itemObj.itmId, title: itemObj.itmTitle}});
            } else if (itemObj.itmType === 'CLASSROOM') {
                this.$router.push({path: `/certifiedCourse/${itemObj.itmId}/0`});
            } else {
                this.$router.push({path: `/course/${itemObj.itmId}/${tkhId}`});
            }
        }
    },
    mounted() {
        this.init();
        this.nodeTitle = window.sessionStorage.getItem('nodeTitle');
    }
};
</script>

<style scoped lang="less">
    .title {
        width: 70%;
        margin: 0 auto;
    }
    .courseList-word-title-01 {
        font-size: 13px;
        color: #1a1a1a;
        padding: 14px 0 0 6px;
        font-weight: bold;
    }
</style>
